<template>
  <div class="container">
    <img class="banner" src="@/assets/user-banner.png" alt="" />
    <div class="title">新闻中心</div>
    <div class="show">
      <div class="wrap">
        <div class="content">
          <div class="col" v-for="item in 3" :key="item">
            <div class="item">
              <img src="@/assets/banner.png" alt="" />
              <p class="ovh2">
                北汽集团是一家涵盖整车及零部件研发、销
                售等业务的汽车企业，成立...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="wrap">
        <div class="col" v-for="item in 5" :key="item">
          <router-link to="/newsDetail">
            <div class="item">
              <div class="time">
                <p>03-08</p>
                <span>2020</span>
              </div>
              <div class="text">
                <p class="ovh2">安全高保障-宝马5系</p>
                <span class="ovh2"
                  >商用车在设计和技术特性上用于运送人员和货物，并且可以牵引挂车，但乘用车不包括在内。主要有：客车、半挂牵引车、货车。商用车在设计和技术特性上用于运送人员和货物，并且可以牵引挂车，但乘用车不包括在内。主要有：客车、半挂牵引车、货车。</span
                >
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
  
 <script>
export default {
  name: "NavBar",
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
  
<style scoped lang="scss">
.banner {
  height: 300px;
}
.title {
  font-size: 58px;
  font-weight: bold;
  text-align: center;
  margin: 30px 0;
}
.show {
  background: #f5f5f5;
  padding: 40px 0;
  .content {
    display: flex;
    margin: 0 -30px;
    .col {
      width: calc(100% / 3);
      padding: 0 30px;
      img {
        height: 200px;
      }
      p {
        font-size: 18px;
        margin-top: 10px;
      }
    }
  }
}
.list {
  .col {
    padding: 24px 0;
    .item {
      display: flex;
      .time {
        width: 135px;
        height: 135px;
        background: #bfbfbf;
        color: #fff;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        padding: 20px;
        justify-content: center;
        p {
          font-size: 34px;
          font-weight: bold;
          font-family: Bebas;
          text-align: center;
        }
        span {
          text-align: right;
          display: block;
          font-size: 16px;
        }
      }
      .text {
        width: calc(100% - 135px);
        padding: 10px 0;
        padding-left: 40px;

        span {
          font-size: 14px;
          color: #5a5a5a;
        }
      }
    }
  }
  .col:hover .time {
    background: #db001a;
  }
}
@media screen and (max-width: 768px) {
}
</style>
  